<template>
    <div class="container" style="position: absolute;top: 0;">
        <img class="el_left" src="/public/image/left.png" alt="">
        <img class="el_right" src="/public/image/right.png" alt="">
        <img src="/public/image/top.png" style="opacity: .5;position: fixed; width: 100%;">
        <img src="/public/image/top1.png" style="opacity: .5;position: fixed; width: 100%;">
        <div class="logoGroup">
            <img class="logo" src="/public/image/logo.png" alt="">
            <span class="logo_text">数据管理平台</span>
        </div>
        <!-- <span class="logo_text_b logo_text"><span class="logo_line"></span>重特大自然灾害应急综合服务</span> -->
        <div class="main">
            <div class="bg1"></div>
            <div class="middle">
                <img src="/public/image/login_border.png" class="login_border">
                <h3 class="login_form"
                    style="position: fixed;left: 73%;transform: translateX(-50%);top: 11%; font-size: 1.2vw;color: #fff;font-weight: bold;">
                    用户登录</h3>
                <a-form :model="formState" name="normal_login" class="login_form" @finish="onFinish" hideRequiredMark
                    @finishFailed="onFinishFailed">
                    <a-form-item label="用户名" name="username" :rules="userRules">
                        <a-input v-model:value="formState.username">
                            <template #prefix>
                                <UserOutlined class="site-form-item-icon" />
                            </template>
                        </a-input>
                    </a-form-item>

                    <a-form-item style="letter-spacing: 4.5px;" label="密码" name="password" :rules="pwdRules">
                        <a-input-password v-model:value="formState.password">
                            <template #prefix>
                                <LockOutlined class="site-form-item-icon" />
                            </template>
                        </a-input-password>
                    </a-form-item>

                    <a-form-item>
                        <!-- <a-form-item name="remember" no-style>
                            <a-checkbox v-model:checked="formState.remember" style="color: #fff;">记住密码</a-checkbox>
                        </a-form-item> -->
                    </a-form-item>

                    <a-form-item>
                        <a-button style="margin-left: 50%;transform: translateX(-50%);width: 100%;" :disabled="disabled"
                            type="primary" html-type="submit" class="login-form-button">
                            登录
                        </a-button>
                    </a-form-item>
                </a-form>
            </div>
        </div>
        <div class="footer" style="position: fixed;bottom: 2%;left: 50%;transform: translateX(-50%);">
            <span style="color: #777;">技术支持</span>
            <a href="https://www.emerict.com/">北京英莫科技有限公司</a>
        </div>
    </div>
</template>
<script>
export default {
    name: "login",
};
</script>
<script setup>
import { onMounted, reactive, computed } from 'vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue';
import { login } from '@api/login.js'
import { verifyToken } from '../../api/user';
import { mapActions, useStore } from "vuex"
const { state, commit, dispatch } = useStore()
const router = useRouter()
// const router = useRouter()
// console.log('login', router.currentRoute.value.meta.isLogin)
const formState = reactive({
    username: '',
    password: '',
})
const userRules = [
    { required: true, message: '请输入用户名' }
]
const pwdRules = [
    { required: true, message: '请输入密码' }
]

const onFinish = (values) => {
    dispatch('login_', { username: formState.username, password: formState.password })
};
</script>

<style lang="less" scoped>
html,
body {
    margin: 0;
    padding: 0;
}

.bg1 {
    width: 100%;
    height: 100%;
    ;
    background: url(/public/image/bottom2@0.7x.png) no-repeat;
    background-size: 100% 100%;
}

.container {
    width: 100%;
    height: 100vh;
    background: url(/public/image/back.jpg) no-repeat;
    background-size: 100% 100%;
}

.logoGroup {
    position: absolute;
    padding: 20px;

    .logo {
        width: 85px;
        margin-right: 20px;
    }

    .logo_text {
        color: white;
        display: inline-block;
        font-weight: bold;
        font-size: 2.5rem;
        vertical-align: middle;
        margin-bottom: 10px;
    }

}

.user_login_text {
    position: absolute;
    color: white;
    top: 50%;
    top: -100%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.container {
    display: flex;
    margin: auto;
}

.el_light {
    position: absolute;
    left: 50%;
    top: -90%;
    transform: translateX(-50%);
}

.el_light_b {
    position: absolute;
    left: 50%;
    top: -22.5%;
    transform: translateX(-50%);
}

.el_left {
    position: fixed;
    top: 54%;
    left: 20%;
    height: 70%;
    transform: translateY(-50%);
}

.el_right {
    position: fixed;
    top: 54%;
    right: 20%;
    height: 70%;
    transform: translateY(-50%);
}

.user {
    width: 25;
    height: 25;
}

.main {
    width: 100%;
    height: 100%;

    .middle {
        position: absolute;
        width: 30%;
        height: 45%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        .login_border {
            position: absolute;
            width: 130%;
            height: 130%;
            top: 45%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }

    .login_form {
        position: absolute;
        top: 65%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 60%;
        height: 80%;
        overflow: hidden;
    }

}

::v-deep .ant-form-item-required {
    color: #fff !important;
}

::v-deep .ant-form-item-label>label {
    color: #fff;
}

#components-form-demo-normal-login .login-form {
    max-width: 300px;
}

#components-form-demo-normal-login .login-form-forgot {
    float: right;
}

#components-form-demo-normal-login .login-form-button {
    width: 100%;
}
</style>